<template>
  <view class="notice-item" :item="item">
    <view class="avatar">
      <image :src="item.avatarUrl" mode="center" style="width: 13.2vw; height: 13.2vw; border: 0.5px solid transparent; border-radius: 6.6vw"></image>
      <up-badge
        v-show="!item.isRead"
        :isDot="true"
        type="success"
        absolute="true"
        :offset="['0.6vw', '0.6vw']"
        style="width: 2.8vw; height: 2.8vw; border-radius: 1.4vw; background-color: red"
      ></up-badge>
    </view>

    <view class="main-body">
      <view class="header">
        <text>{{ item.sender }}</text>
        <text style="color: #d5d5d5; font-size: 3.6vw">{{ currentTime }}</text>
      </view>
      <view class="footer">{{ item.content }}</view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import formatTime from '@/utils/formatTime.js';
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({
      avatarUrl: '',
      sender: '未知',
      lastTime: '2000-01-01 00:00',
      content: '这是一段未知的评论',
      isRead: true
    })
  }
});

const currentTime = computed(() => {
  return formatTime(props.item.lastTime);
});
</script>

<style lang="scss" scoped>
.notice-item {
  width: 89.6vw;
  height: 23.7vw;
  // padding: auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .avatar {
    width: 13.3vw;
    height: 13.3vw;
    margin: auto 0;
    position: relative;
  }
  .main-body {
    width: 73vw;
    height: 13.3vw;
    margin: auto 0;
    .header {
      width: 73vw;
      height: 50%;
      display: flex;
      font-size: 4vw;
      color: black;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .footer {
      width: 56vw;
      height: 50%;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 显示省略号 */
      font-size: 3.6vw;
      color: #d5d5d5;
      line-height: 6.65vw;
      text-align: left;
    }
  }
}
</style>
